<template>
  <div class="main" @click="clickMe">
    <A />
    <B />
    <C />
    <D />
    <E />
    
    <!-- <div>
      <h3>ref函数在setup中创建响应式变量</h3>
      <p v-if="refVariable1">variable-01</p>
      <p v-if="refVariable2">variable-02</p>
    </div> -->

  </div>
</template>

<script>


import A from './components/A' // A 组件
import B from './components/B' // B 组件
import C from './components/C' // C 组件
import D from './components/D' // D 组件
import E from './components/E' // E 组件
// 引入 生命周期 函数
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
// 引入 store
import store from '@/store'

export default {
  name: 'Home',
  components:{
    A,
    B,
    C,
    D,
    E,
  },
  data(){
    return {

    }
  }, 
  
  /*
    Composition-API（组合式api，vue3新增）: 为vue应用提供更好的逻辑复用和代码组织
    setup: 
      => 创建组件之前执行，在beforeCreate和created之前执行，创建 data 和 method
      => 在执行 setup 时，尚未创建组件实例，setup 选项中没有 this
      => setup(props, context) 接受2个参数，props 和 context
         props 是响应式的
         context（非响应式）对象暴露三个属性，{ attrs, slots, emit}
      => setup(){ ... return{} } setup中返回的内容可以用于组件的其余部分
      => ref()      创建响应式变量
      => reactive() 创建响应式对象
      => toRefs()   将响应式对象转换成普通对象，用于解构操作 
      ...
  */
  setup(props, context){  

    const clickMe = () => {   // 自定义一个方法 clickMe
      refVariable1 = false
      refVariable2.value = true
      
      /*
        vuex同步操作 - 取值、存值, 同步的数据状态的变更使用同步操作方法即可
        取值：store.state.device
        存值：store.commit('TOGGLE_DEVICE', 'mobile')

        vuex异步操作 - 取值、存值, 异步操作例如向后台发送请求的处理过程,可以通过异步操作方法交给 action 进行处理
        取值：store.getters.device
        存值：store.dispatch('ToggleDevice', 'mobile')
      */
    }
    
    const data = reactive({   // reactive() 创建响应式对象
      headerImg: '../../assets/img/s2.webp'
    })
    
    let refVariable1 = true;  // ref函数 - 创建响应式变量
    let refVariable2 = ref(false);
    


    /*
      Composition-API 组合API-setup() 内部注册的生命周期函数钩子
      1=>  setup()            创建组件之前，在beforeCreate和created之前执行，创建data和method
      2=>  onBeforeMount()    组件挂载到节点上之前执行的函数
      3=>  onMounted()        组件挂载完成后执行的函数
      4=>  onBeforeUpdate()   组件更新之前执行的函数
      5=>  onUpdated()        组件更新完成之后执行的函数
      6=>  onBeforeUnmount()  组件卸载之前执行的函数
      7=>  onUnmounted()      组件卸载完成后执行的函数
      8=>  onActivated()      被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行
      9=>  onDeactivated()    比如从 A 组件，切换到 B 组件，A 组件消失时执行
      10=> onErrorCaptured()  当捕获一个来自子孙组件的异常时激活钩子函数
    */
    onBeforeMount(() => {  // setup内部生命周期函数 - onBeforeMount
      console.log("-onBeforeMount()-");
    })

    onMounted(() => {  
      console.log("-onMounted()-");
    })
    
    return { // 返回给外部组件使用
      clickMe,
      data,
      refVariable1,
      refVariable2
    }
  },

  computed(){

  },
  watch(){

  },
  methods:{

  },
  mounted(){
    
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 0 0 2rem 0;
  overflow: hidden;
  .preview {
    margin: 0 auto;
    width: 32.5rem;
    height: 15rem;
    margin-top: .5rem;
  }
}
</style>
